<template>
  <div class="goods">
    <div class="nav">

      <div class="w">
        <a href="javascript:;" :class="{active:sortType===1}" @click="reset()">综合排序</a>
        <a href="javascript:;" :class="{active:sortType===2}" @click="sort(1)">价格从低到高</a>
        <a href="javascript:;" :class="{active:sortType===3}" @click="sort(-1)">价格从高到低</a>
        <div class="price-interval">
          <input v-model="params.min" type="number" class="input" placeholder="价格">
          <span style="margin: 0 5px"> - </span>
          <input v-model="params.max" type="number" placeholder="价格">
          <input v-model="params.name" type="text" class="input" placeholder="商品名">
          <y-button text="确定" class-style="main-btn" style="margin-left: 10px;" @btnClick="fetchItervalProduct" />
          <y-button text="重置" class-style="default-btn" style="margin-left: 10px;" @btnClick="reset" />
        </div>
      </div>
    </div>
    <go-top />
    <!--商品-->
    <div
      class="goods-box w"
    >
      <mall-goods v-for="(item,i) in computer" :key="i" :msg="item" />
    </div>
    <infinite-loading ref="infiniteLoading" spinner="circles" @infinite="onInfinite">
      没有啦
    </infinite-loading>
    <!-- <div
      v-show="!busy"
      v-infinite-scroll="loadMore"

      class="w load-more"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="10"
      infinite-scroll-delay="200"
    >
      正在加载中...
    </div> -->
  </div>
</template>
<script>
import { getAllProduct, searchProduct } from '@/api/goods'
import goTop from '@/components/goTop'
import mallGoods from '@/components/mallGoods'
import YButton from '@/components/YButton'
export default {
  components: {
    mallGoods,
    YButton,
    goTop
  },
  data() {
    return {
      computer: [],
      busy: false,
      timer: null,
      sortType: 1,
      windowHeight: null,
      windowWidth: null,
      params: {
        page: 1, // 页码
        sort: '', // 排序
        min: '', // 最小价格
        max: ''
      }
    }
  },
  created() {
    this.handleGetProduct(false)
  },
  mounted() {
    this.windowHeight = window.innerHeight
    this.windowWidth = window.innerWidth
  },
  methods: {
    fetchItervalProduct() {
      this.params.page = 1
      this.handleGetProduct(false)
    },
    // 获取数据, flag表示是否为拼接
    handleGetProduct(flag) {
      const { page, sort, min, max, name } = this.params
      const params = {
        page: page - 1,
        sort,
        priceGt: min,
        priceLte: max,
        name
      }
      // 根据名称查询 暂时不支持 排序和价格区间
      if (name !== undefined && name.length >= 1) {
        searchProduct(params).then(res => {
          if (res.success) {
            const data = res.data.items
            if (flag) {
              this.computer = this.computer.concat(data)
            } else {
              this.computer = data
            }
          }
          this.busy = res.data.finish
        })
      } else {
        getAllProduct(params).then(res => {
          if (res.success) {
            const data = res.data.items
            if (flag) {
              this.computer = this.computer.concat(data)
            } else {
              this.computer = data
            }
          }
          this.busy = res.data.finish
        })
      }
    },
    // 默认排序
    reset() {
      this.sortType = 1
      this.params = {
        page: 1, // 页码
        sort: '', // 排序
        min: '', // 最小价格
        max: '',
        name: undefined
      }
      this.busy = false
    },
    // 价格排序
    sort(v) {
      if (v === 1) {
        this.sortType = 2
        this.params.sort = 'asc'
      } else {
        this.sortType = 3
        this.params.sort = 'desc'
      }
      this.params.page = 1
      this.busy = false
      this.handleGetProduct(false)
    },
    loadMore() {
    // notwork
      this.busy = true
      console.log('call')
      // this.timer =
      setTimeout(() => {
        this.params.page++
        this.handleGetProduct(true)
        this.busy = false
        console.log('call2')
      }, 500)
    },
    // 无限加载
    onInfinite($state) {
      setTimeout(() => {
        this.params.page++
        this.handleGetProduct(true)
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
        // $state.loaded()
        if (this.busy) {
          $state.complete()
        }
      }, 1000)
    }

  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/style/mixin";
  @import "../../assets/style/theme";

  .nav {
    height: 60px;
    line-height: 60px;
    > div {
      display: flex;
      align-items: center;
      a {
        padding: 0 15px;
        height: 100%;
        @extend %block-center;
        font-size: 12px;
        color: #999;
        &.active {
          color: #5683EA;
        }
        &:hover {
          color: #5683EA;
        }
      }
      input {
        @include wh(80px, 30px);
        border: 1px solid #ccc;
      }
      input + input {
        margin-left: 10px;
      }
    }
    .price-interval {
      padding: 0 15px;
      @extend %block-center;
      input[type=number] {
        border: 1px solid #ccc;
        text-align: center;
        background: none;
        border-radius: 5px;
      }
      input[type=text] {
        border: 1px solid #ccc;
        background: none;
        border-radius: 5px;
        margin-left: 10px;
        width: 160px;
      }
    }
  }
  .load-more {
    text-align: center;
    overflow-y: auto;
    max-height: 100vh;
  }
  .goods-box {
    > div {
      float: left;
      border: 1px solid #efefef;
    }
  }

</style>
